<template>
  <div>
    <BHeader></BHeader>
    <div class="order">
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="我的购物车" icon="el-icon-shopping-cart-2"></el-step>
        <el-step title="确认订单" icon="el-icon-receiving"></el-step>
        <el-step title="完成订单" icon="el-icon-document-checked"></el-step>
      </el-steps>
      <div class="address">
        <div style="width:1200px;height:50px;background-color:lightskyblue">
          <label>收货地址</label>
          <el-button @click="showAddDialog()" type="text">新增收货地址</el-button>
        </div>
        <div style="width:1200px;height:200px">
          <form>
            <div v-for="address in addressList" :key="address.id">
              <input
                type="radio"
                name="地址"
                @click="choseAddr(address.addr)"
              /><span>{{ address.addr }}</span>
              <el-button @click="showEditDialog(address)" size="mini" type="primary">修改</el-button>
              <el-button @click="removeAddrById(address.id)" size="mini" type="primary"
                >删除</el-button
              >
            </div>
          </form>
        </div>
        <div style="width:1200px;height:600px">
          <div
            style="font-size:36px;width:1200px;height:50px;background-color:lightskyblue;"
          >
            商品清单
          </div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%;margin-top:20px"
          >
            <el-table-column prop="bname" label="商品名称" width="300">
            </el-table-column>
            <el-table-column prop="num" label="数量" width="200">
            </el-table-column>
            <el-table-column prop="price" label="商品单价" width="200">
            </el-table-column>
            <el-table-column label="合计" width="200">
              <template slot-scope="scope">{{ scope.row.num * scope.row.price }}元</template>
            </el-table-column>
            <el-table-column  label="优惠券" width="300">
              <template slot-scope="scope">
              满{{scope.row.couponLimit}}减{{scope.row.couponValue}}
            </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div style="float:left">
        <p style="margin-top: 12px;">
          应付金额为:<span style="color:red;font-size:15px">{{orderInfo.payPrice}}</span>￥
        </p>
      </div>
      <div style="float:right">
        <el-button
          type="danger"
          style="margin-top: 12px;"
          @click="submitOrder()"
          >提交订单</el-button
        >
      </div>
    </div>

    <el-dialog title="添加地址" :visible.sync="dialogAddFormVisible">
      <el-form ref="addressForm" :model="addressForm" label-width="120px">
        <el-form-item label="地址">
          <el-input v-model="addressForm.addr"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addAddress()">添加</el-button>
          <el-button @click="dialogAddFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="修改地址" :visible.sync="dialogEditFormVisible">
      <el-form ref="addressForm" :model="addressForm" label-width="120px">
        <el-form-item label="地址">
          <el-input v-model="addressForm.addr"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editAddr()">修改</el-button>
          <el-button @click="dialogEditFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<style scoped>
.address {
  margin-top: 50px;
  width: 1200px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: lightskyblue 1px solid;
}
.order {
  margin: 0 auto;
  width: 1200px;
  height: 800px;
}
</style>
<script>
import BHeader from "../../components/BHeader.vue";
import { createOrder } from "../../api/order/order";
import {
  createAddress,
  editAddress,
  delAddress,
  getUserAddressList,
  getById
} from "../../api/order/address";
export default {
  name: "BeforeCreO",
  components: {
    BHeader,
  },
  data() {
    return {
      active: 1,
      address: "",
      tableData: [],
      addressList: [],
      orderInfo: {},
      addressForm: {},
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
    };
  },
  methods: {
    submitOrder() {
      if(this.address==""||this.address==null||this.address==undefined){
        this.$message.info("您还未选择地址")
        return
      }
      let decreaseVoList = [];
      for(let i=0;i<this.tableData.length;i++){
         decreaseVoList.push({ bid: this.tableData[i].bid, num: this.tableData[i].num });
      }
      this.orderInfo.decreaseVoList = decreaseVoList;
      this.orderInfo.address = this.address;
      createOrder(this.orderInfo).then((res) => {
        if (res.flag) {
          this.$router.push({path:"/pay",query:{id:res.data}});
          if (this.active++ > 2) this.active = 0;
        }
      });
    },
    showAddDialog() {
      this.addressForm = {};
      this.dialogAddFormVisible = true;
    },
    showEditDialog(info) {
      console.log(info)
      this.addressForm = {};
      getById(info.id).then((res)=>{
        if(res.flag){
          this.addressForm = res.data
        }
      })
      this.dialogEditFormVisible = true;
    },
    choseAddr(addr) {
      this.address = addr;
    },
    addAddress() {
      createAddress(this.addressForm).then((res) => {
        if (res.flag) {
          this.getAddressList();
          this.dialogAddFormVisible=false
        }
      });
    },
    editAddr() {
      console.log(this.addressForm)
      editAddress(this.addressForm).then((res) => {
        if (res.flag) {
          this.getAddressList();
            this.dialogEditFormVisible = false;
        }
      });
    },
    removeAddrById(id) {
       this.$confirm("此操作将永久删除该地址, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delAddress(id).then((res) => {
          if (res.flag) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
             this.getAddressList();
          }
        });
      });
    },
    getAddressList() {
      getUserAddressList().then((res) => {
        if (res.flag) {
          this.addressList = res.data;
        }
      });
    },
    initTableData(){
      this.tableData=[];
      var singleOrder = JSON.parse(localStorage.getItem("orderinfo"));
      if(singleOrder!=null&&singleOrder!=''&&singleOrder!=undefined){
        this.tableData.push(singleOrder);
        this.orderInfo.payPrice = singleOrder.price * singleOrder.num;
        if(singleOrder.couponLimit!=''&&singleOrder.couponLimit!=null&&singleOrder.coupon.limit<=this.orderInfo.payPrice){
         this.orderInfo.payPrice -=singleOrder.couponValue
        }
        return;
      }
      var cartOrder = JSON.parse(localStorage.getItem("cartOrder"));
      if(cartOrder!=null&&cartOrder!=undefined){
        this.orderInfo.payPrice = 0;
        for(let i=0;i<cartOrder.length;i++){
          this.tableData.push({
            couponLimit: cartOrder[i].couponLimit,
            couponValue: cartOrder[i].couponValue,
            num: cartOrder[i].number,
            price: cartOrder[i].currprice==null?cartOrder[i].oriprice:cartOrder[i].currprice,
            bname: cartOrder[i].bname,
            bid: cartOrder[i].bid
          })
         
           let pp = (this.tableData[i].price)*(this.tableData[i].num);
           if(cartOrder[i].couponLimit!=null&&cartOrder[i].couponLimit!=''&&cartOrder[i].couponLimit<=this.orderInfo.payPrice)
           {
           pp -= cartOrder[i].couponValue;
          }
            this.orderInfo.payPrice += pp;
        }
        return;
      }
      
    }
  },
  created(){
    this.getAddressList()
  },
  mounted() {
    this.initTableData();
  }
};
</script>
